<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css2</title>
    <style type="text/css">
        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;

            /*position: relative;*/
            /*height: 150px;*/
            /*width: 150px;*/
            /*margin: 0px;*/
            /*padding:2px;*/
            /*border: 1px solid black;*/
            perspective:550px;
            -webkit-perspective:550px;
            /*perspective-origin: 50% 100px;*/
            /*-webkit-perspecitve-origin: 50% 100px;*/
        }
        .div2{
            position: absolute;
            font-size: 30px;
            /*width: 200px;*/
            /*height: 200px;*/
            /*background-color: #1aba9c;*/
            -webkit-animation: zhuan 3s linear infinite;
            /*-webkit-perspective: 1000px;*/
            -webkit-perspective:150px;
            perspective-origin: 50% 150px;
            -webkit-transform: rotateY(0deg);
            text-shadow: 2px 2px 2px red;
            /*border: 1px solid black;*/
            /*-webkit-backface-visibility:hidden;*/
            transition:-webkit-animation 10s ;

        }
        @-webkit-keyframes zhuan {
            from{-webkit-transform:rotateY(0deg);}
            to{-webkit-transform:rotateY(60deg);}
        }
        /*.div3{*/
        /*width: 200px;*/
        /*height: 200px;*/
        /*background-color: chartreuse;*/
        /*}*/
    </style>
</head>
<body>
<div class="div1">
    <p class="div2">HELLO</p>
    <div class="div3">HI</div>
</div>
</body>
</html>